<template>
    <div class="spike-hardware">
        <div class="hardware-section">
            <h3>主控制器 (Hub)</h3>
            <div class="specs">
                <div class="spec-item">
                    <span>处理器：</span>STM32F413 (ARM Cortex M4, 100MHz)
                </div>
                <div class="spec-item">
                    <span>内存：</span>256KB RAM, 1MB Flash
                </div>
                <div class="spec-item">
                    <span>陀螺仪：</span>LSM6DS3TR (6轴IMU)
                    <ul>
                        <li>陀螺仪范围：±2000 dps</li>
                        <li>加速度范围：±16g</li>
                        <li>采样率：100Hz</li>
                    </ul>
                </div>
                <div class="spec-item">
                    <span>端口：</span>
                    <ul>
                        <li>6个 LPF2 端口 (A-F)</li>
                        <li>通信协议：UART (115200 baud)</li>
                        <li>电压：3.3V</li>
                        <li>引脚：VCC, GND, DATA1, DATA2</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="hardware-section">
            <h3>传感器</h3>
            <div class="sensors">
                <div class="sensor-item" v-for="(sensor, index) in sensors" :key="index">
                    <h4>{{ sensor.name }}</h4>
                    <ul>
                        <li v-for="(spec, i) in sensor.specs" :key="i">{{ spec }}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const sensors = ref([
    {
        name: '力传感器',
        specs: [
            '测量范围：0-10N',
            '分辨率：0.1N',
            '采样率：1kHz'
        ]
    },
    {
        name: '颜色传感器',
        specs: [
            '检测8种颜色',
            '环境光检测',
            '距离检测：0-20cm',
            '刷新率：100Hz'
        ]
    },
    {
        name: '距离传感器',
        specs: [
            '范围：2-200cm',
            '精度：±1cm',
            '刷新率：100Hz'
        ]
    },
    {
        name: '电机编码器',
        specs: [
            '分辨率：1度',
            '最大速度：185rpm',
            '反馈频率：100Hz'
        ]
    }
]);

const portProtocol = {
    messageFormat: {
        length: 1,      // 消息长度字节
        type: 1,        // 消息类型字节
        command: 1,     // 命令字节
        port: 1,        // 端口号字节
        data: 'n',      // 数据字节
        checksum: 1     // 校验和字节
    },
    commands: {
        WRITE: 0x00,
        READ: 0x01,
        VERSION: 0x02,
        MODE: 0x03
    }
};
</script>

<style scoped>
.spike-hardware {
    padding: 20px;
    background: #f5f5f5;
    border-radius: 8px;
}

.hardware-section {
    margin-bottom: 20px;
}

.hardware-section h3 {
    color: #2563eb;
    margin-bottom: 16px;
}

.spec-item {
    margin: 8px 0;
    line-height: 1.6;
}

.spec-item span {
    font-weight: 500;
    color: #4b5563;
}

.spec-item ul {
    margin: 4px 0;
    padding-left: 20px;
}

.sensors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.sensor-item {
    background: white;
    padding: 16px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.sensor-item h4 {
    color: #2563eb;
    margin-bottom: 8px;
}

.sensor-item ul {
    padding-left: 20px;
    margin: 0;
}

.sensor-item li {
    margin: 4px 0;
    color: #4b5563;
}
</style> 